<style scope>
 .box{

     margin: 0 20px;
 }
 .link_team_box{
     height: 400px;
 }
 .ivu-table td.demo-table-info-column .ivu-table-cell div{
     overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
 }
 .ivu-modal-footer .ivu-btn.ivu-btn-text.ivu-btn-large{
     display: none;
 }
   .table-theme.highlight_table tr td:nth-child(3),.table-theme.highlight_table tr th:nth-child(3){
       padding-left: 15px;
   }
   .table-theme.highlight_table tr td:nth-child(4),.table-theme.highlight_table tr th:nth-child(4){
       padding-left: 15px;
   }
   .check{
       width:50%;
       box-sizing: border-box;
       margin-right: 0;
       height: 36px;
       line-height: 36px;
   }
   .check .ivu-checkbox{
       margin-right: 5px;
   }
   .modelBody .ivu-modal-body{
       overflow-y: scroll;
       height: 385px;
       padding-left: 20px;
       padding-right: 20px;
   }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="box">
            <Row>
                <Col span="2" offset="22" >
                    <Button type="warning" @click="modelTrue" class="fr " v-if="$isShow('compensate_tool/relevance')" icon="plus-round">
                        设置关联公司</Button>
                </Col>
            </Row>
            <div class="table-theme highlight_table">
                <Table :columns="tableHead" :data="tableData" style="margin-top:15px;" stripe highlight-row border size="large"></Table>
            </div>
        </div>
        <div id="footer">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="24" class="tRight">
                    <Page class="page"  placement="top" :total="total" show-sizer show-elevator show-total :page="search.p" :pageSize="search.pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                    <!-- <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page> -->
                </Col>
            </Row>
        </div>
        <Modal
            v-model="modal1"
            title="关联公司" 
            ok-text="关闭"
            width="446px"
            class="modelBody"
            >
            <template v-for="item in all_tool">
                <Checkbox @on-change="checkboxChange($event,item.id,item.groupName,item.checked)" :true-value="item.checked?false:true" class="check">{{item.groupName}}</Checkbox>
            </template>
        </Modal>
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle';
    import {list_tool , list_tool_third , tool_third} from '../../api/compensate_tool'
    export default {
        data(){
            return{
                social: [],
                add:'',
                loading:true,
                modal1:false,
                all_tool:[],
                tableHead:[
                    {
                        type: 'index',
                        title:'序号',
                        width: 60,
                        align: 'center'
                    },
                    {
                        key:'groupName',
                        title:'公司名称',
                        align:'center',
                    },
                    
                    {
                        key:'data',
                        title:'理赔说明',
                        width:'70%',
                        className:'demo-table-info-column',
                        render:(h,params)=>{
                            return h('div',{
                                domProps:{
                                    // innerHTML:this.aaa
                                    innerHTML:(function(){
                                                let str="";
                                                let _this = this;
                                                params.row.data.map(item=>{
                                                    str+=item.name+'：';
                                                    // str+=item.items.type+':'+',必备资料:'+item.items.necessarys+',理赔资料'+item.items.settlements;
                                                    for(let i=0;i<item.items.length;i++){
                                                        str+=item.items[i].type+'：必备资料：'+item.items[i].necessarys+'；理赔资料：'+item.items[i].settlements+'；';
                                                    }
                                                })
                                                return str;
                                                })(),
                                    title:(function(){
                                                let str="";
                                                let _this = this;
                                                params.row.data.map(item=>{
                                                    str+=item.name+'：';
                                                    // str+=item.items.type+':'+',必备资料:'+item.items.necessarys+',理赔资料'+item.items.settlements;
                                                    for(let i=0;i<item.items.length;i++){
                                                        str+=item.items[i].type+'：必备资料：'+item.items[i].necessarys+'；理赔资料：'+item.items[i].settlements+'；';
                                                    }
                                                })
                                                return str;
                                                })(),
                                },
                            })
                        }
                    },
                    {
                        key:'tel',
                        title:'公司电话',
                    },
                    // {
                    //     title:'操作',
                    //     align:'center',
                    //     render:(h,params)=>{
                    //         return h('div',[
                    //             h('Button',{
                    //                 props:{
                    //                     type: 'warning',
                    //                     size: 'small'
                    //                 },
                    //                 style: {
                    //                     marginRight: '5px'
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         let _params={
                    //                             pid:params.row.id,
                    //                             groupName:params.row.groupName
                    //                         };
                    //                         this.$Modal.confirm({
                    //                             title:'正在进行取消关联操作',
                    //                             content:'确认取消关联吗？',
                    //                             onOk:()=>{
                    //                                 new Promise((resolve, reject) => {
                    //                                     tool_third(_params).then(res => {
                    //                                         if (res.data.err == 0) {
                    //                                             this.get_all();
                    //                                             this.get_list();
                    //                                             this.$Message.success('操作成功');
                    //                                         }
                    //                                         resolve();
                    //                                     }).catch(error => {
                    //                                         reject(error);
                    //                                     });
                    //                                 });
                    //                             }
                    //                         })
                    //                     }
                    //                 }
                    //             },'取消关联'),
                    //         ])
                    //     }
                    // }
                ],
                formItem:{
                   pid:'',
                   groupName:''                
                },
                total:1,
                tableData:[],
                formItemRules:{
                    pid:[
                        {
                            required:true,
                            message:'关联公司不能为空'
                        }
                    ]
                },
                search:{
                    p:1,
                    pagesize:10,
                },
                total:100,
            }
        },
        components:{
            productTitle
        },
        created(){
            this.get_all();
            this.get_list();
        },
        methods:{
            checkboxChange(val,id,groupName,checked){
                let _params = {
                    pid:id,
                    groupName:groupName
                }
                if(val){
                    new Promise((resolve, reject) => {
                            tool_third(_params).then(response => {
                                if (response.data.err == 0) {
                                    this.get_all();
                                    this.get_list();
                                    this.$Message.success('操作成功');
                                }else{
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                }else{
                    let _params={
                        pid:id,
                        groupName:groupName
                    };
                    new Promise((resolve, reject) => {
                                    tool_third(_params).then(res => {
                                        if (res.data.err == 0) {
                                            this.get_all();
                                            this.get_list();
                                            this.$Message.success('操作成功');
                                         }
                                        resolve();
                                    }).catch(error => {
                                        reject(error);
                                    });
                    });
                }
            },
            onChange (newTargetKeys) {
                this.targetKeys = newTargetKeys;
            },
            render1 (item) {
                return item.key + ':' + item.label;
            },
            nameChange(val){
                console.log(val);
                this.formItem.groupName = val.label;
                this.formItem.pid = val.value;
            },
            right(){
                this.$refs['formItem'].validate(valid=>{
                    if(valid){
                        new Promise((resolve, reject) => {
                            tool_third(this.formItem).then(response => {
                                if (response.data.err == 0) {
                                    this.$refs['formItem'].resetFields();
                                    this.get_all();
                                    this.get_list();
                                    this.$Message.success('操作成功');
                                    this.modal1 = false;
                                }else{
                                    this.$Message.error(response.data.info);
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true;
                                        });
                                    }, 1000);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    }else{
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            modelTrue(){
                this.modal1 = true;
            },
            get_all(){
                new Promise((resolve, reject) => {
                    list_tool().then(response => {
                        if (response.data.err == 0) {
                            this.all_tool = [];
                            this.guanlian="";
                            this.groupName="";
                            let _this = this;
                            this.$nextTick(function(){
                                _this.all_tool=response.data.data;
                            })
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            get_list(){
                new Promise((resolve, reject) => {
                    list_tool_third(this.search).then(response => {
                        if (response.data.err == 0) {
                            this.tableData=[];
                            this.total = response.data.data.total;
                            let _this = this;
                            this.$nextTick(function(){
                                _this.tableData=response.data.data.list;
                            })
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            pageChange(value){
                this.formItem.p = value;
            },
            pageSizeChange(val){
                this.formItem.pagesize = value;
            },
            pageChange(val){
                this.search.p = val;
                this.get_list();
                this.get_all();
            },
            pageSizeChange(val){
                this.search.pagesize = val;
                this.get_list();
                this.get_all();
            }
            
        }
    }
</script>

